/**
 * Created by 居胜 on 2016/5/11.
 */
(function(){

    //保存数据的数组
    var dataTags = [];
    var dataFuns = [];

    //选择器
    function $(id){
        return document.getElementById(id);
    }

    //id   需要校验匹配的输入框
    //dataTags 将数据保存的数组
    //返回值为通过分隔符分割开的字符数组
    function getInputData(id, dataArr){

        var inputStr = $(id).value.trim();
        $(id).value = "";

        //分割字符串
        var arrInput = inputStr.split(/[^0-9a-zA-Z\u4e00-\u9fa5]+/).filter(function (item) {
            //是否为空串， 以及保存数据的数组中是否已存在相同元素
            if(item.length > 0 && (dataArr.indexOf(item) < 0 )){
                return true;
            }else {
                return false;
            }
        });

        //对于兴趣，需要对当前输入产生的数组去重
        if(id == "funs"){
            arrInput = unique(arrInput);
        }

        dataArr = dataArr.concat(arrInput);
        if(dataArr.length >= 10){
            dataArr.splice(0, dataArr.length - 10);
        }
        return dataArr;
    }

    //数组去重
    function unique(array){
        var n = [];//临时数组
        for(var i = 0; i<array.length; i++){
            if(n.indexOf(array[i]) == -1){
                n.push(array[i]);
            }
        }
        return n;
    }

    //事件绑定函数
    //事件名： on + ~~ 的形式
    function bindEvent(ele, event_name, func){
        if(window.addEventListener){
            event_name = event_name.replace(/^on/, "");
            ele.addEventListener(event_name, func, false);
        }else if(window.attachEvent) {
            ele.attachEvent(event_name, func);
        }else{
            ele[event_name] = func;
        }
    }

    //根据数组中的数据渲染页面
    //id  需要渲染的框
    //dataTags  提供渲染数据的数组
    function render(id, arr){
        var dataToHtml = arr.map(function(item){
            return "<div class='tag'>" + item + "</div>";
        }).join("");

        $(id).innerHTML = dataToHtml;
    }


    bindEvent($("str-input"), "onkeyup", function(event){
        var keyCode = event.keyCode;
        if(keyCode == 32 || keyCode == 13 || (event.shiftKey == false && keyCode == 186)){
            dataTags = getInputData("str-input", dataTags);
            render("display", dataTags);
        }
    });

    bindEvent($("insert"), "onclick", function(event){
        dataFuns = getInputData("funs", dataFuns);
        render("showFuns", dataFuns);
    });

    /****************************事件代理************************************/
    //点击删除
    bindEvent($("display"), "onclick", function(event){
        var target = event.target;
        if (target.className.toUpperCase() === "TAG"){
            var clickStr = target.innerHTML.replace(/^点击删除/, "");
            var index = dataTags.indexOf(clickStr);
            if(index > -1) {
                dataTags.splice(index, 1);
            }
            render("display", dataTags);
        }
    })

    //mouseover 显示"点击删除***"
    bindEvent($("display"), "onmouseover", function (event) {
        var target = event.target;
        if(target.className.toUpperCase() == "TAG"){
            target.style.width = "100px";
            target.innerHTML = "点击删除" + target.innerHTML;
            target.style.backgroundColor = "red";
        }
    })

    //mouseout  恢复原有样式
    bindEvent($("display"), "onmouseout", function (event) {
        var target = event.target;
        if(target.className.toUpperCase() == "TAG"){
            target.style.width = "50px";
            target.innerHTML = target.innerHTML.replace(/^点击删除/, "");
            target.style.backgroundColor = "orange";
        }
    })

})();